<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>扇形导航</title>
<style>
	body{ background:#f9f9f9;}
	#menu{
		width: 50px; height: 50px; 
		position: fixed;
		right: 20px; bottom: 20px; 
	}
	#list{
		height: 42px; width: 42px; 
		position: relative;
		margin: 4px;
	}
	#list img{ 
		border-radius: 21px; 
		position: absolute;
		left: 0; top: 0; 
		transition: 0.5s all ease;
	}
	#home{
		width: 50px; height: 50px;
		background: url(img/home.png) no-repeat; 
		border-radius: 25px; 
		position: absolute; 
		left: 0; top: 0; 
		transition: 1s;
	}
</style>
<script>
	window.onload=function(){
		
		var hom=document.getElementById("home");
		var imgs=document.getElementById("list").getElementsByTagName("img");
		
		var onOff=true;
		var r=150;
		
		for( var i=0;i<imgs.length;i++ ){		
			imgs[i].onclick=function(){		
				this.style.transition="0.3s"
				this.style.WebkitTransform=" scale(2) ";
				this.style.opacity="0";		
				addEnd( this,end);		
			};
		}
	
		function end(){
				this.style.transition="0.3s";
				this.style.WebkitTransform=" scale(1) ";
				this.style.opacity=1;
				removeEnd( this,end );					
		}
		
		hom.onclick=function(){
			if( onOff ){
				this.style.WebkitTransform="rotate(-720deg)";
				for( var i=0;i<imgs.length;i++ ){
					var olt=toLT(r,90/4*i);
					imgs[i].style.transition=0.3+i*0.1+"s";
					imgs[i].style.left=-olt.l+"px";
					imgs[i].style.top=-olt.t+"px";
					imgs[i].style.WebkitTransform="rotate(-720deg)";
				}
			}else{
				this.style.WebkitTransform="rotate(720deg)";
				for( var i=0;i<imgs.length;i++ ){	
					imgs[i].style.transition=0.3+(imgs.length-1-i)*0.1+"s";
					imgs[i].style.left=0+"px";
					imgs[i].style.top=0+"px";
					imgs[i].style.WebkitTransform="rotate(0deg)";
				}
			}
			onOff=!onOff;	
		}	
		
		function addEnd( obj,fn ){
			obj.addEventListener( 'WebkitTransitionEnd',fn,false );
			obj.addEventListener( 'transitionend',fn,false );
		}
		
		function removeEnd( obj,fn ){
			obj.removeEventListener( 'WebkitTranstionEnd',fn,false );
			obj.removeEventListener( 'transitonend',fn,false );	
		}
				
		function toLT( iR,iDeg ){
			return { l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
		}
	} 

</script>

</head>
<body>
	<div id="menu">
    	<div id="list">
        	<img src="img/clos.png">
            <img src="img/full.png">
            <img src="img/open.png">
            <img src="img/prev.png">
            <img src="img/refresh.png">
        </div>
        <div id="home"></div>
    </div>
</body>
</html>
